﻿.mui-tabs {
    padding: 20px 0;

    .tabs-hd {
        border-bottom: 1px solid #bbb;
        margin-top: -1px;

        li {
            float: left;
            margin-right: 2px;
        }

        a {
            display: block;
            padding: 8px 20px;
            border-radius: 5px 5px 0 0;
            border: 1px solid #bbb;
            border-bottom: none;
            position: relative;
        }

        .active {
            padding-bottom: 9px;
            background: #fff;
            margin-bottom: -1px;
        }
    }

    .tabs-body {
        border: 1px solid #bbb;
        margin-top: -1px;

        .tabs-panel {
            padding: 15px;
            display: none;
        }

        .active {
            display: block;
        }
    }
}

.tabs-ver {
    &:after, &:before {
        display: table;
        content: "";
    }

    &:after {
        clear: both;
    }

    .tabs-hd {
        float: left;
        
        box-sizing: border-box;
        padding: 0px;
        border: none;

        li {
            margin-bottom: 3px;
            float:none;
            a {
                border-radius: 5px 0 0 5px;
                border-bottom: 1px solid #bbb;
                width: 50px;
                min-width:50px;                
                background: #f5f5f5;
            }

            .active {
                padding-right: 21px;
                background: #fff;
                margin-right: -1px;
                border-right: 0px;
                background: #fff;
            }
        }
    }

    .tabs-body {
        margin-left: 91px;
        height: 120px;
        min-height: 120px;

        .tabs-panel {
            padding: 15px;
            height: 100%;
            box-sizing: border-box;
        }
    }
}
